<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div style="width: 100px; height: 100px;background-color: skyblue;"></div>
	<script>
		// function calc() {
		// 	var sum = 0
		// 	for (var i = 0; i < 1000000000; i++) {
		// 		sum += i;
		// 	}
		// 	return sum
		// }
		// var num = 0;
		// setInterval(() => {
		// 	calc()
		// 	num++;
		// 	console.log(num)
		// 	console.log(new Date().getTime())
		// }, 100);
		var start;
		var length = 0;
		var v = 1;
		function render(time) {

			if (start === undefined) {
				start = time
			}
			const elapsed = time - start;
			start = time;
			// console.log("时间", time)
			// console.log("间隔时间", elapsed)


			if (length > 1000) {
				v = -1
			}
			if (length < 0) {
				v = 1;
			}
			length += v * elapsed;
			document.querySelector('div').style.transform = `translateX(${length}px)`
			requestAnimationFrame(render)
		}
		requestAnimationFrame(
			render
		)
	</script>
</body>

</html>